<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
  <title>主页</title>
</head>
<body>
<%
//  String studentId = (String) session.getAttribute("user");
  String studentId = (String) session.getAttribute("studentId");
%>
<h3 style="text-align: center; margin-top: 5%">欢迎您&nbsp;&nbsp;<%=studentId%>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <button class="btn btn-danger" id="logout">退出</button>
</h3>
<div>
  <div class="container">
    <div class="row" style="text-align: center;margin-top: 20%">
      <div class="col-6 col-md-4"><button class="btn btn-primary" id="per_info">个人信息</button></div>
      <div class="col-6 col-md-4"><button class="btn btn-success" id="show_marks">查看成绩</button></div>
      <div class="col-6 col-md-4"><button class="btn btn-info" id="edit_pwd">密码修改</button></div>
    </div>
  </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="showInfoModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form class="studentInfoForm">
          <div class="form-group">
            <label>学号</label>
            <input readonly="readonly" name="studentId" type="text" class="form-control" id="editStudentId">
          </div>
          <div class="form-group">
            <label>中文名</label>
            <input name="chName" type="text" class="form-control" id="editChName">
          </div>
          <div class="form-group">
            <label>英文名</label>
            <input name="enName" type="text" class="form-control" id="editEnName">
          </div>
          <div class="form-group">
            <label>电话号码</label>
            <input name="tel" type="text" class="form-control" id="editTel">
          </div>
          <div class="form-group">
            <label>班级</label>
            <input readonly="readonly" name="stuClass" type="text" class="form-control" id="editStuClass">
          </div>
          <div class="form-group">
            <label>学期</label>
            <input readonly="readonly" name="semester" type="text" class="form-control" id="editSemester">
          </div>
          <div class="form-group">
            <label>在籍状态</label>
            <input readonly="readonly" name="status" type="text" class="form-control" id="editStatus">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="saveEditStudent">保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" tabindex="-1" role="dialog" id="showMarksModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form class="studentMarksForm">
          <div class="form-group">
            <label>期中成绩</label>
            <input readonly="readonly" name="midMarks" type="text" class="form-control" id="MidMarks">
          </div>
          <div class="form-group">
            <label>期末成绩</label>
            <input readonly="readonly" name="endMarks" type="text" class="form-control" id="EndMarks">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" tabindex="-1" role="dialog" id="pwd_show">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form class="pwdForm">
          <div class="form-group">
            <label>学号</label>
            <input readonly="readonly" name="studentId" type="text" class="form-control" id="edit_studentId">
          </div>
          <div class="form-group">
            <label>密码</label>
            <input name="password" type="text" class="form-control" id="edit_studentPwd">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="submit_pwd">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>

<script>

  $("#per_info").click(function (){
    $("#showInfoModal").modal('show')
    $.ajax({
      url: "${APP_PATH}/getStudentById",
      data: {"studentId": <%=studentId%>},
      method: "POST",
      success: function (res){
        console.log(res)
        $("#editStudentId").val(res.data.data.studentId)
        $("#editChName").val(res.data.data.chName)
        $("#editEnName").val(res.data.data.enName)
        $("#editTel").val(res.data.data.tel)
        $("#editStuClass").val(res.data.data.stuClass)
        $("#editSemester").val(res.data.data.semester)
        $("#editStatus").val(res.data.data.status)
      }
    })
  })
  $("#saveEditStudent").click(function (){
    $.ajax({
      url: "${APP_PATH}/saveStudentByStudent",
      data: $(".studentInfoForm").serialize(),
      method: "POST",
      success: function (res){
        if(res.code === 200){
          alert("保存成功")
          $("#showInfoModal").modal('hide')
        }
      }
    })
  })

  $("#show_marks").click(function (){
    $("#showMarksModal").modal('show')
    $.ajax({
      url: "${APP_PATH}/getStudentById",
      data: {"studentId": <%=studentId%>},
      method: "POST",
      success: function (res){
        $("#MidMarks").val(res.data.data.midMarks)
        $("#EndMarks").val(res.data.data.endMarks)
      }
    })
  })

  $("#edit_pwd").click(function (){
    $("#pwd_show").modal('show')
    $.ajax({
      url: "${APP_PATH}/getStudentById",
      data: {"studentId": <%=studentId%>},
      method: "POST",
      success: function (res){
        $("#edit_studentId").val(res.data.data.studentId)
        $("#edit_studentPwd").val(res.data.data.password)
      }
    })
  })
  $("#submit_pwd").click(function (){
    $.ajax({
      url: "${APP_PATH}/updateStuPwd",
      data: $(".pwdForm").serialize(),
      method: "POST",
      success: function (res){
        if(res.code === 200){
          alert("修改成功，下次登录有效")
          $("#pwd_show").modal('hide')
        }
      }
    })
  })

  $("#logout").click(function (){
    window.location.href = "${APP_PATH}/login.jsp"
  })

</script>


<style>
  body{
    background-color: #9fcdff;
  }
</style>
